<template>
  <div class="people_info_container">
    <div class="information">
      <ElAvatar :src="data.avatar" :size="60" @click.stop="handleGoPersonalHome" class="cursor-pointer"></ElAvatar>
      <div class="introduction">
        <div class="name">{{ data.name }}</div>
        <slot>
          <div class="des">{{ data.description }}</div>
        </slot>
      </div>
    </div>
    <slot name="action">
      <div v-if="currentUserId!==data.id">
        <template v-if="data.isFollow">
          <ElButton round  @click="handleFollow(data.id)">取消关注</ElButton>
        </template>
        <template v-else>
          <ElButton type="primary" round @click="handleFollow(data.id)">+关注</ElButton>
        </template>
      </div>
    </slot>
  </div>
</template>

<script lang="ts" setup>
import {useRouter} from 'vue-router'
import { useUserStore } from '@/stores/user'

const userStore=  useUserStore()

const currentUserId = computed(()=>userStore.userInfo.uid||'10035')
export interface FollowEntity {
  id:string|number,
  avatar?: string
  name: string
  description?: string
  isFollow?: boolean
}
const $props = withDefaults(defineProps<{ data: FollowEntity }>(), {
  data: () => ({
    id: '',
    avatar: '',
    name: '',
    description: '',
    isFollow: true,
  }),
})
console.log($props)

const $emit=defineEmits(['refresh'])
const handleFollow=async(id:string|number)=>{
  await service.user.followUser(id)
  $emit('refresh')
}


const router = useRouter()
const handleGoPersonalHome=()=>{
  router.push(`/main/personalHomepage?id=${$props.data.id}`)
}
</script>

<style lang="scss" scoped>
.people_info_container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .information {
    display: flex;
    gap: 10px;
    align-items: center;

    .introduction {
      .name {
        font-weight: 700;
      }

      .des {
        color: #999;
      }
    }
  }
}
</style>
